<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>购物车</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css" />
    <script src="static/script/jquery-1.7.2.js"></script>
    <script>
      $(function () {
        $("#emptyCart").click(function () {
          // Bind the click event to the hyperlink that clears the shopping cart
          return confirm("确定清空购物车吗?"); // Are you sure empty the cart?
        });

        $(".deleteCartItem").click(function () {
          // Bind the click event to the hyperlink of the deleted cart
          var title = $(this).attr("id"); // return the value of the book's title Get the name of the book
          return confirm("确定要删除 " + title + " 这件商品吗?");
        });

        $(".updateCartItem").change(function () {
          // Bind the change event to the input that enters the number of cartItems
          var cartItemId = $(this).attr("id"); // Get the ID of the cartItem
          var bookCount = $(this).val(); // Get the number of books entered by the user
          var url = "/updateCartItem";
          var params = { cartItemId: cartItemId, bookCount: bookCount };
          var $tdEle = $(this).parent().next().next();
          $.post(
            url,
            params,
            function (res) {
              $("#totalCount").text(res.TotalCount);
              $("#totalAmount").text(res.TotalAmount);
              $tdEle.text(res.Amount);
            },
            "json"
          );
        });
      });
    </script>
  </head>
  <body>
    <div id="header">
      <img class="logo_img" alt="" src="/static/img/logo.gif" />
      <span class="wel_word">购物车</span>
      {{if .UserID}}
      <div>
        <span>欢迎<span class="um_span">{{.Phone}}</span>光临书城</span>
        <a href="/getCartInfo">购物车</a>
        <a href="/getMyOrder">我的订单</a>
        <a href="/logout">注销</a>&nbsp;&nbsp;
        <a href="/">返回</a>
      </div>
      {{else}}
      <div>
        <a href="/pages/user/login.html">登录</a> |
        <a href="/pages/user/regist.html">注册</a> &nbsp;&nbsp;
        <a href="/pages/manager/manager.html">后台管理</a>
        <a href="/getOrders">订单管理</a>
      </div>
      {{end}}
    </div>

    <div id="main">
      {{if .}}
      <table>
        <tr>
          <td>名称</td>
          <td>数量</td>
          <td>单价</td>
          <td>金额</td>
          <td>操作</td>
        </tr>
        {{range .CartItems}}
        <tr>
          <td>{{.Item.Title}}</td>
          <td>
            <input
              id="{{.ID}}"
              class="updateCartItem"
              type="text"
              value="{{.Count}}"
              style="text-align: center; width: 50px"
            />
          </td>
          <td>{{.Item.Price}}</td>
          <td>{{.Amount}}</td>
          <td>
            <a
              id="{{.Item.Title}}"
              class="deleteCartItem"
              href="/deleteCartItem?cartItemId={{.ID}}"
              >删除</a
            >
          </td>
        </tr>
        {{end}}
      </table>
      <div class="cart_info">
        <span class="cart_span"
          >购物车中共有<span class="b_count" id="totalCount"
            >{{.TotalCount}}</span
          >件商品</span
        >
        <span class="cart_span"
          >总金额<span class="b_price" id="totalAmount">{{.TotalAmount}}</span
          >元</span
        >
        <span class="cart_span"><a href="/">继续购物</a></span>
        <span class="cart_span"
          ><a href="/deleteCart?cartId={{.CartID}}" id="emptyCart"
            >清空购物车</a
          ></span
        >
        <span class="cart_span"><a href="/checkout">去结算</a></span>
      </div>
      {{else}}
      <br /><br /><br /><br /><br /><br /><br />
      <h1 align="center">
        购物车为空，快去<a href="/" style="color: red">购物</a> 吧！
      </h1>
      {{end}}
    </div>

    <div id="bottom">
      <span> Copyright © 2007-2020 书文 版权所有 </span>
      <span> 京ICP备15025412号-2 京ICP备15025412-4号 </span>
      <span> 24小时客服电话微信15010729356 </span>
    </div>
  </body>
</html>
